<template>
  <div class="container">
    <nav-bar title="用户名" />
    <div class="user-navs">
      <router-link to="/userNick" class="item">
        <div class="label">用户名</div>
        <div class="value">
          <input 
            type="text" 
            placeholder="请输入用户名" 
            :value="customName" 
            @input="inputName"
          >
        </div>
      </router-link>
    </div>
    <div class="btn-cart">
      <div class="btn-in" @click="save">保存</div>
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getUserDetail, saveUserInfo } from '../../network/user'
import { Toast } from 'vant'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      customName: '',
      userInfoDetail: {}
    }
  },
  mounted() {
    this.getUserDetail()
  },
  methods: {
    getUserDetail(){
      let requestData = {
        userkey: this.userKey
      }
      getUserDetail(requestData, info => {
        this.userInfoDetail = info
        this.customName = info.Nick
      })
    },
    inputName(e){
      this.customName = e.target.value
    },
    save(){
      let userInfoDetail = this.userInfoDetail
      let requestData = {
        userkey: this.userKey,
        Id: userInfoDetail.UserId,
        RealName: userInfoDetail.RealName,
        Nick: this.customName,
        Email: userInfoDetail.Email,
        QQ: userInfoDetail.QQ,
        CellPhone: userInfoDetail.CellPhone,
        Sex: userInfoDetail.Sex,
        BirthDay: userInfoDetail.BirthDay,
        Occupation: ' ',
        Photo: userInfoDetail.Photo || ' ',
      }
      saveUserInfo(requestData, res => {
        Toast('修改成功')
        setTimeout(() => {
          this.$router.back()
        }, 1000)
      })
    }
  },
}
</script>

<style scoped>
.user-navs .item{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 30px;
  height: 60px;
  font-size: 14px;
  border-top: 1px solid #f7f7f7;
  background-color: #ffffff;
}
.user-navs .item .label{
  line-height: 60px;
}
.user-navs .item-mt{
  margin-top: 10px;
  border-top: none;
}
.user-navs .item .value{
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  flex-grow: 1;
  color: #8c8c8c;
  text-align: right;
}
.user-navs .item .value input{
  width: 100%;
  text-align: right;
}
.user-navs .item .value .new{
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #d50721;
}
.user-navs .item .arrow{
  width: 6px;
  height: 6px;
  border-top: 1px solid #8c8c8c;
  border-right: 1px solid #8c8c8c;
  transform: rotate(45deg);
  margin-left: 10px;
}
.btn-cart{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background-image: linear-gradient(rgba(255, 255, 255, 0), #ffffff, #ffffff);
}
.btn-cart .btn-in{
  line-height: 50px;
  border-radius: 50px;
  color: #ffffff;
  text-align: center;
  background-color: #000000;
}
</style>